﻿@{
    ViewBag.Title = "填写充值信息";
    ViewBag.Menu = "step3";
    ViewBag.Tree = "recharge";    
    Layout = "~/Views/Shared/_RechargeLayout.cshtml";
}

@section HeadJavaScript{
    <script src="~/Scripts/angular/base/angular.min.js" type="text/javascript"></script>
    <!--[if (IE 6)|(IE 7)]><script type="text/javascript" src="~/Scripts/angular/base/json2.js"></script><![endif]-->
    <script src="~/Scripts/angular/js/recharge.js" type="text/javascript"></script>
    <script src="~/Scripts/angular/base/angular.autoload.js" type="text/javascript"></script>
}

<div class="pos"><img src="/images/images/pay_dian.jpg" /> <a href="#">充值中心</a> - 在线充值</div>
            
<div id="czonline"  ng-controller="rechargeCtrl" ng-init="load({
        name:{msg:'请输入您要充值的账号!',required:'请输入您要充值的账号！',error:'您输入的通行证错误，无此通行证！',failed:'检测账号失败，请联系我们',success:true}
        ,confirm: { msg:'请再次输入您要充值的账号!',required:'请再次输入您要充值的账号！',error: '您输入的帐号不相同，请确认后重新输入！',success:true}
        ,amount: {msg:'请输入1-100000之间的整数，单位：元',error: '请输入1-100000元之间的整数',success:true}
        ,verifyvalue: { msg:'请输入图片显示的数字或字母',error: '请正确填写验证码',success:true}
        ,submit:{verifycode:'验证码错误',account:'帐号错误',order:'系统繁忙，请稍候再试',error:'系统异常，请联系我们'}
    });
    name.url='/account/contains/r/Default';
    submit.url='/order/new';
    style={true:'cur'};
    name.value='@ViewData["name"]';
    ">
    <div class="cz_left">
        <ul>
            <li ng-class="style[selector.value=='bank']" ng-click="selector.change('bank');">
                <div><img src="/images/images/pay_zf1.jpg" />网银充值</div>
            </li>
            <li ng-class="style[selector.value=='alipay']" ng-click="selector.change('alipay');">
                <div><img src="/images/images/pay_zf2.jpg" />支付宝快捷支付</div>
            </li>
            <li ng-class="style[selector.value=='easyown']" ng-click="selector.change('easyown');">
                <div><img src="/images/images/pay_zf3.jpg" />神州行充值</div>
            </li>
            <li ng-class="style[selector.value=='unicom']" ng-click="selector.change('unicom');">
                <div><img src="/images/images/pay_zf4.jpg" />联通卡充值</div>
            </li>
            <li ng-class="style[selector.value=='telecom']" ng-click="selector.change('telecom');">
                <div><img src="/images/images/pay_zf5.jpg" />电信卡充值</div>
            </li>
        </ul>
    </div>
    <div class="cz_right">
    <div class="tit" style="display:none;" ng-show="selector.value=='bank'"><span><img src="/images/images/pay_zf1.jpg" /></span>网银充值</div>
    <div class="tit" style="display: none" ng-show="selector.value=='alipay'"><span><img src="/images/images/pay_zf2.jpg" /></span>支付宝快捷支付</div>
    <div class="tit" style="display: none" ng-show="selector.value=='easyown'"><span><img src="/images/images/pay_zf3.jpg" /></span>神州行充值</div>
    <div class="tit" style="display: none" ng-show="selector.value=='unicom'"><span><img src="/images/images/pay_zf4.jpg" /></span>联通卡充值</div>
    <div class="tit" style="display: none" ng-show="selector.value=='telecom'"><span><img src="/images/images/pay_zf5.jpg" /></span>电信卡充值</div>
                   
        <form class="form1" name="form" on-submit="submit();" onsubmit="return false;"> 
            <table class="tab1" width="550">
                <tr>
                    <td width="115"><span class="txtr">充值账号：</span> </td>
                    <td width="160"><input type="text" class="text155" tabindex="1" name="name" ng-init="name.input()" on-focus="name.input()" on-blur="name.validate();" ng-model="name.value" ng-pattern="/^[a-zA-Z0-9]*$/" ng-minlength="6" ng-maxlength="16" required//></td>
                    <td><span class="error" ng-show="name.error" style="display:none;"><img src="/images/images/error.jpg" /> {{name.error}}</span></td>
                </tr>
                <tr>
                    <td><span class="txtr">再次输入充值账号：</span> </td>
                    <td><input type="text" class="text155" tabindex="2" name="confirm" ng-init="confirm.input()" on-focus="confirm.input()" on-blur="confirm.validate();" ng-model="confirm.value" required/></td>
                    <td><span class="error" ng-show="confirm.error" style="display:none;"><img src="/images/images/error.jpg" /> {{confirm.error}}</span></td>
                </tr>
                <tr style="border-bottom:1px solid #E7E7E7;">
                    <td><span class="txtr">选择游戏 ：</span></td>
                    <td>
                        {{game.name}}
                    </td>
                    <td></td>
                </tr>
                <tr style="border-bottom:1px solid #E7E7E7;">
                    <td><span class="txtr" >选择充值大区 ：</span></td>
                    <td>
                        <select tabindex="4" name="region" ng-model="region" ng-options="r.name for r in game.regions" ng-change="rchange()"></select>
                    </td>
                    <td></td>
                </tr>
                <tr ng-show="selector.value=='bank'||selector.value=='alipay'">
                    <td><span class="txtr">充值金额：</span> </td>
                    <td width="160"><input type="text" class="text155"  maxLength="6" tabindex="5" name="amount" ng-init="amount.input()" on-focus="amount.input()" on-blur="amount.validate();" ng-model="amount.value"/></td>
                    <td><span class="error" ng-show="amount.error" style="display:none;"><img src="/images/images/error.jpg" /> {{amount.error}}</span> </td>
                </tr>
                <tr style="display:none;" ng-show="selector.value=='unicom'||selector.value=='easyown'||selector.value=='telecom'">
                    <td><span class="txtr">充值金额：</span> </td>
                    <td colspan="2">
                        <table style="display:none;" ng-show="selector.value=='unicom'">
								<tr>
									<td><input type="radio" name="unicom" value="20" ng-model="unicom" id="unicom-20" /></td><td style="padding:0 5px 0 5px"><label for="unicom-20">20元</label></td>
									<td><input type="radio" name="unicom" value="30" ng-model="unicom" id="unicom-30" /></td><td style="padding:0 5px 0 5px"><label for="unicom-30">30元</label></td>
									<td><input type="radio" name="unicom" value="50" ng-model="unicom" id="unicom-50" /></td><td style="padding:0 5px 0 5px"><label for="unicom-50">50元</label></td>
								</tr>
								<tr>
									<td><input type="radio" name="unicom" value="100" ng-model="unicom" id="unicom-100" /></td><td style="padding:0 5px 0 5px"><label for="unicom-100">100元</label></td>
									<td><input type="radio" name="unicom" value="300" ng-model="unicom" id="unicom-300" /></td><td style="padding:0 5px 0 5px"><label for="unicom-300">300元</label></td>
									<td><input type="radio" name="unicom" value="500" ng-model="unicom" id="unicom-500" /></td><td style="padding:0 5px 0 5px"><label for="unicom-500">500元</label></td>
								</tr>
						</table>
                        <table style="display:none;" ng-show="selector.value=='easyown'">
							    <tr>
								    <td><input type="radio" name="easyown" value="10" ng-model="easyown" id="easyown-10"/></td><td style="padding:0 5px 0 5px"><label for="easyown-10">10元</label></td>
								    <td><input type="radio" name="easyown" value="20" ng-model="easyown" id="easyown-20"/></td><td style="padding:0 5px 0 5px"><label for="easyown-20">20元</label></td>
								    <td><input type="radio" name="easyown" value="30" ng-model="easyown" id="easyown-30"/></td><td style="padding:0 5px 0 5px"><label for="easyown-30">30元</label></td>
							    </tr>
							    <tr>
								    <td><input type="radio" name="easyown" value="50" ng-model="easyown" id="easyown-50"/></td><td style="padding:0 5px 0 5px"><label for="easyown-50">50元</label></td>
								    <td><input type="radio" name="easyown" value="100" ng-model="easyown" id="easyown-100"/></td><td style="padding:0 5px 0 5px"><label for="easyown-100">100元</label></td>
								    <td><input type="radio" name="easyown" value="200" ng-model="easyown" id="easyown-200"/></td><td style="padding:0 5px 0 5px"><label for="easyown-200">200元</label></td>
							    </tr>
							    <tr>
								    <td><input type="radio" name="easyown" value="300" ng-model="easyown" id="easyown-300"/></td><td style="padding:0 5px 0 5px"><label for="easyown-300">300元</label></td>
								    <td><input type="radio" name="easyown" value="500" ng-model="easyown" id="easyown-500"/></td><td style="padding:0 5px 0 5px"><label for="easyown-500">500元</label></td>
								    <td><input type="radio" name="easyown" value="1000" ng-model="easyown" id="easyown-1000"/></td><td style="padding:0 5px 0 5px"><label for="easyown-1000">1000元</label></td>
							    </tr>
						</table>
                        <table style="display:none;" ng-show="selector.value=='telecom'">
								<tr>
									<td><input type="radio" name="telecom" value="50" ng-model="telecom" id="telecom-50"/></td><td style="padding:0 5px 0 5px"><label for="telecom-50">50元</label></td>
									<td><input type="radio" name="telecom" value="100" ng-model="telecom" id="telecom-100"/></td><td style="padding:0 5px 0 5px"><label for="telecom-100">100元</label></td>
								</tr>
							</table>
                    </td>
                </tr>
                <tr>
                    <td><span class="txtr">游戏币充值数量：</span> </td>
                    <td width="160"><font color="#FF0000"; style="text-decoration:underline;" style="display:none;" ng-show="selector.value=='bank'||selector.value=='alipay'">{{((amount.val*region.exchange)||0).toString()}}</font><font color="#FF0000"; style="text-decoration:underline;" style="display:none;"  ng-show="selector.value=='unicom'||selector.value=='easyown'||selector.value=='telecom'">{{((this[selector.value]*region.exchange)||0).toString()}}</font> 金币</td>
                    <td></td>
                </tr>
            </table>
            <ul class="yh" style="display:none;" ng-show="selector.value=='bank'">
                <li><input type="radio" name="bank" value="ICBC" ng-model="bank" id="bank-icbc"/><label for="bank-icbc"><img src="/images/images/bank/yh1.jpg" /></label></li>
                <li><input type="radio" name="bank" value="CMB" ng-model="bank" id="bank-cmb"/> <label for="bank-cmb"><img src="/images/images/bank/yh2.jpg" /></label></li>
                <li><input type="radio" name="bank" value="CCB" ng-model="bank" id="bank-ccb"/> <label for="bank-ccb"><img src="/images/images/bank/yh3.jpg" /></label></li>
                <li><input type="radio" name="bank" value="BOC" ng-model="bank" id="bank-boc"/> <label for="bank-boc"><img src="/images/images/bank/yh4.jpg" /></label></li>
                <li><input type="radio" name="bank" value="ABC" ng-model="bank" id="bank-abc"/> <label for="bank-abc"><img src="/images/images/bank/yh5.jpg" /></label></li>
                <li><input type="radio" name="bank" value="POST" ng-model="bank" id="bank-post"/> <label for="bank-post"><img src="/images/images/bank/yh6.jpg" /></label></li>
                <li><input type="radio" name="bank" value="SPDB" ng-model="bank" id="bank-spdb"/> <label for="bank-spdb"><img src="/images/images/bank/yh7.jpg" /></label></li>
                <li><input type="radio" name="bank" value="GDB" ng-model="bank" id="bank-gdb"/> <label for="bank-gdb"><img src="/images/images/bank/yh8.jpg" /></label></li>
                <li><input type="radio" name="bank" value="CEB" ng-model="bank" id="bank-ceb"/> <label for="bank-ceb"><img src="/images/images/bank/yh9.jpg" /></label></li>
                <li><input type="radio" name="bank" value="ECITIC" ng-model="bank" id="bank-ecitic"/> <label for="bank-ecitic"><img src="/images/images/bank/yh10.jpg" /></label></li>
                <li><input type="radio" name="bank" value="CMBC" ng-model="bank" id="bank-cmbc"/> <label for="bank-cmbc"><img src="/images/images/bank/yh11.jpg" /></label></li>
                <li><input type="radio" name="bank" value="CIB" ng-model="bank" id="bank-cib"/> <label for="bank-cib"><img src="/images/images/bank/yh12.jpg" /></label></li>
                <li><input type="radio" name="bank" value="PINGAN" ng-model="bank" id="bank-pingan"/> <label for="bank-pingan"><img src="/images/images/bank/yh13.jpg" /></label></li>
                <li><input type="radio" name="bank" value="SDB" ng-model="bank" id="bank-sdb"/> <label for="bank-sdb"><img src="/images/images/bank/yh14.jpg" /></label></li>
                <li><input type="radio" name="bank" value="BOCO" ng-model="bank" id="bank-boco"/> <label for="bank-boco"><img src="/images/images/bank/yh15.jpg" /></label></li>
                <li><input type="radio" name="bank" value="NJCB" ng-model="bank" id="bank-njcb"/> <label for="bank-njcb"><img src="/images/images/bank/yh16.jpg" /></label></li>
                <li><input type="radio" name="bank" value="NBCB" ng-model="bank" id="bank-nbcb"/> <label for="bank-nbcb"><img src="/images/images/bank/yh17.jpg" /></label></li>
                <li><input type="radio" name="bank" value="BCCB" ng-model="bank" id="bank-bccb"/> <label for="bank-bccb"><img src="/images/images/bank/yh18.jpg" /></label></li>
                <li><input type="radio" name="bank" value="HKBEA" ng-model="bank" id="bank-hkbea"/> <label for="bank-hkbea"><img src="/images/images/bank/yh19.jpg" /></label></li>
                <li style="top:10px;">账户余额支付，一点通支付</li>
            </ul>
            <table class="tab1" width="550">
                <tr>
                    <td width="115"><span class="txtr">验证码：</span> </td>
                    <td width="160"><input type="text" class="text155" tabindex="6" name="verifyvalue" ng-init="verifyvalue.input()" on-focus="verifyvalue.input()" on-blur="verifyvalue.validate();" ng-model="verifyvalue.value" ng-pattern="verifyvalue.pattern" required/></td>
                    <td><span class="error" ng-show="verifyvalue.error" style="display:none;"><img src="/images/images/error.jpg" /> {{verifyvalue.error}}</span></td>
                </tr>
                <tr>
                    <td width="115"></td>
                    <td width="160"><img ng-src="{{verifycode.value}}" ng-click="verifycode.newdefault()" style="border:1px solid #000;" /> <a ng-click="verifycode.newdefault()">看不清楚，换一张</a></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="3" align="center" class="error" > {{submit.error}} </td>
                </tr
                <tr>
                    <td colspan="3" align="center"><input type="submit" value="" class="pay_ljcz" tabindex="7"/></td>
                </tr>
            </table>   
        </form>   
    </div>
</div>